$(window).on('load', function() {
    showGoods("数码电子");
});

let box = $('#show');
let search = $('.tags-link').parent();

// 添加全局加载进度条
$('body').prepend('<div class="loading-bar"></div>');

search.click(function(e) {
    e.preventDefault();
    let link = $(this);
    
    // 显示加载进度条
    $('.loading-bar').css('width', '30%');
    
    // 添加加载动画
    box.html(`
        <div class="row">
            ${Array(6).fill().map(() => `
                <div class="col-md-4">
                    <div class="skeleton-card">
                        <div class="skeleton-img"></div>
                        <div class="skeleton-content">
                            <div class="skeleton-line"></div>
                            <div class="skeleton-line short"></div>
                            <div class="skeleton-price"></div>
                            <div>
                                <div class="skeleton-avatar"></div>
                                <div class="skeleton-name"></div>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('')}
        </div>
    `);
    
    // 继续加载
    showGoods(link.children('.tags-link').text());
});

function showGoods(tag) {
    // 更新加载进度
    $('.loading-bar').css('width', '60%');
    
    $.ajax({
        url: "indexFindGoods",
        type: 'get',
        data: { tag: tag },
        success: function(data) {
            // 完成加载进度
            $('.loading-bar').css('width', '100%').addClass('complete');
            
            setTimeout(() => {
                $('.loading-bar').remove();
            }, 500);
            
            var count = 0;
            box.empty();
            
            if (data.length === 0) {
                box.html(`
                    <div class="text-center py-5">
                        <i class="far fa-frown fa-3x mb-3" style="color: #ccc;"></i>
                        <h4>没有找到相关商品</h4>
                        <p class="text-muted">尝试其他分类或关键词</p>
                    </div>
                `);
                return;
            }
            
            // 分批渲染商品，每3个一组
            for (var i = 0; i < Math.ceil(data.length / 3); i++) {
                let info = `<ul class="row" style="list-style: none;padding-left: 0px;">`;
                
                for (var t = count; t < Math.min(count + 3, data.length); t++) {
                    info += `
                        <li class="col-md-4 good-link" style="animation-delay: ${(t % 3) * 0.1}s">
                            <a href="addCollDo?goodId=${data[t].goodid }&userId=${data[t].sellerId }" class="d-flex justify-content-between align-items-center">
                            <input type="hidden" name="goodId" value="${data[t].goodid }">
                    		<input type="hidden" name="userId" value="${data[t].sellerId }">
                                <div>
                                    <img src="${data[t].goodimg}" 
                                         alt="${data[t].goodname}" 
                                         class="goods-img">
                                </div>
                                <div class="good-info" style="padding: 5px;">
                                    <p class="g-name">${data[t].goodname}</p>
                                    <p class="dec" style="color:rgba(0, 0, 0, 0.5);">
                                        <small>${data[t].gooddec || '暂无描述'}</small>
                                    </p>
                                    <p class="price">￥${data[t].goodprice}</p>
                                    <p class="name">${data[t].seller.username}</p>
                                </div>
                            </a>
                        </li>`;
                }
                
                info += `</ul>`;
                box.append(info);
                count += 3;
            }
        },
        error: function(xhr, status, error) {
            $('.loading-bar').remove();
            box.html(`
                <div class="text-center py-5">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3 text-danger"></i>
                    <h4>加载失败</h4>
                    <p class="text-muted">请稍后再试或刷新页面</p>
                    <button class="btn btn-primary mt-3" onclick="location.reload()">
                        <i class="fas fa-sync-alt"></i> 重新加载
                    </button>
                </div>
            `);
            console.error('Error:', status, error);
        },
        dataType: 'json'
    });
}